import React, { useEffect } from "react";
import { Card, Col, Row, Typography, Space } from "antd";
import {
  UserOutlined,
  TeamOutlined,
  BookOutlined,
  FileOutlined,
  SolutionOutlined,
  LoginOutlined,
} from "@ant-design/icons";
import type { ReactNode } from "react";
import { authApi } from "@/services/api";
import { motion } from "framer-motion";
import { useInView } from "react-intersection-observer";

const { Title, Paragraph } = Typography;

// 定义卡片数据类型
interface CardItem {
  title: string;
  description: string;
  icon: ReactNode;
  color: string;
}

// 获取用户信息
const getUserInfo = async () => {
  try {
    const res = await authApi.userInfo();
    console.log(res);
    localStorage.setItem("userInfo", JSON.stringify(res.data));
  } catch (error) {
    console.log(error);
  }
};

// 动画卡片组件
const AnimatedCard: React.FC<{ item: CardItem; index: number }> = ({ item, index }) => {
  const [ref, inView] = useInView({
    triggerOnce: false,
    threshold: 0.1,
  });

  return (
    <motion.div
      ref={ref}
      initial={{ opacity: 0, y: 50 }}
      animate={inView ? { opacity: 1, y: 0 } : { opacity: 0, y: 50 }}
      transition={{ duration: 0.6, delay: index * 0.1 }}
      whileHover={{ 
        y: -10,
        transition: { duration: 0.3 }
      }}
    >
      <Card
        hoverable
        style={{
          height: "100%",
          borderLeft: `4px solid ${item.color}`,
        }}
      >
        <Space
          direction="vertical"
          size="middle"
          style={{ width: "100%" }}
        >
          <motion.div
            style={{
              backgroundColor: `${item.color}10`,
              width: "48px",
              height: "48px",
              borderRadius: "8px",
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              color: item.color,
            }}
            whileHover={{ 
              scale: 1.2,
              rotate: 5,
              transition: { duration: 0.3 }
            }}
          >
            {item.icon}
          </motion.div>
          <div>
            <Title level={4} style={{ margin: 0, color: item.color }}>
              {item.title}
            </Title>
            <Paragraph style={{ marginTop: "8px", minHeight: "40px" }}>
              {item.description}
            </Paragraph>
          </div>
        </Space>
      </Card>
    </motion.div>
  );
};

const HomePage: React.FC = () => {
  // 卡片数据
  const cardItems: CardItem[] = [
    {
      title: "学生管理",
      description: "管理学生信息，包括添加、编辑、删除学生记录",
      icon: <UserOutlined style={{ fontSize: "24px" }} />,
      color: "#1890ff",
    },
    {
      title: "教师管理",
      description: "维护教师信息，管理教师档案和课程分配",
      icon: <TeamOutlined style={{ fontSize: "24px" }} />,
      color: "#52c41a",
    },
    {
      title: "课程管理",
      description: "创建和管理课程信息，设置课程容量和任课教师",
      icon: <BookOutlined style={{ fontSize: "24px" }} />,
      color: "#722ed1",
    },
    {
      title: "选课管理",
      description: "管理学生选课情况，处理选课申请和退课",
      icon: <SolutionOutlined style={{ fontSize: "24px" }} />,
      color: "#fa8c16",
    },
    {
      title: "任务管理",
      description: "发布和管理课程任务，跟踪学生完成情况",
      icon: <FileOutlined style={{ fontSize: "24px" }} />,
      color: "#f5222d",
    },
    {
      title: "管理员管理",
      description: "管理系统用户权限，维护管理员账户信息",
      icon: <LoginOutlined style={{ fontSize: "24px" }} />,
      color: "#13c2c2",
    },
  ];

  const [titleRef, titleInView] = useInView({
    triggerOnce: false,
    threshold: 0.1,
  });

  const [systemInfoRef, systemInfoInView] = useInView({
    triggerOnce: false,
    threshold: 0.1,
  });

  useEffect(() => {
    getUserInfo();
  }, []);

  return (
    <div style={{ padding: "24px" }}>
      {/* 系统标题 */}
      <motion.div
        ref={titleRef}
        initial={{ opacity: 0, y: -30 }}
        animate={titleInView ? { opacity: 1, y: 0 } : { opacity: 0, y: -30 }}
        transition={{ duration: 0.8 }}
        style={{ textAlign: "center", marginBottom: "32px" }}
      >
        <Title level={2}>教学管理系统</Title>
        <Paragraph style={{ fontSize: "16px", color: "#888" }}>
          欢迎使用教学管理系统，您可以通过以下功能模块管理学校各项信息
        </Paragraph>
      </motion.div>

      {/* 功能卡片网格 */}
      <Row gutter={[24, 24]}>
        {cardItems.map((item, index) => (
          <Col xs={24} sm={12} md={8} key={index}>
            <AnimatedCard item={item} index={index} />
          </Col>
        ))}
      </Row>

      {/* 系统信息 */}
      <motion.div
        ref={systemInfoRef}
        initial={{ opacity: 0, y: 50 }}
        animate={systemInfoInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 50 }}
        transition={{ duration: 0.8 }}
      >
        <Card style={{ marginTop: "24px" }}>
          <Title level={4}>系统说明</Title>
          <Paragraph>
            本系统是一个综合性的教学管理平台，支持对学生、教师、课程、选课、任务等信息的全面管理。
            系统提供了直观的操作界面和丰富的功能模块，方便管理员高效地进行各项管理工作。
          </Paragraph>
          <Paragraph>
            通过顶部导航菜单可以访问各个功能模块，每个模块都提供了增删改查等基本操作功能。
          </Paragraph>
        </Card>
      </motion.div>
    </div>
  );
};

export default HomePage;